{extend name="layout/detail" /}

{block name="content"}
<div class="td-content-wrap p20">
    <div class="td-content-header">
        <h1 class="main-title">添加系统数据</h1>
    </div>
    <hr>
    <div class="space-20"></div>
    <form id="form_data" class="layui-form" method="post" action="{:url('save')}">
        <input type="hidden" name="opmode" value="add">
        <div class="layui-form-item">
            <label class="layui-form-label required">名称：</label>
            <div class="layui-input-block w19">
                <input type="text" name="name" placeholder="请输入名称" class="layui-input" check="required" info="请输入名称"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">编码：</label>
            <div class="layui-input-block w19">
                <input type="text" name="code" placeholder="请输入编码" class="layui-input" check="required" info="请输入编码"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">简介：</label>
            <div class="layui-input-block">
                <textarea name="desc" class="layui-textarea"></textarea>
            </div>
        </div>
        <hr>
        <h2 class="sub-title">字段设置</h2>
        <div id="field_box">
            <div class="layui-form-item">
                <label class="layui-form-label">
                    字段
                    <span class="field_idx"></span>
                </label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <input type="text" name="field_name[]" placeholder="字段名称" class="layui-input" check="required" info="字段名称"/>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="field_code[]" placeholder="字段编码" class="layui-input" check="required" info="字段编码"/>
                    </div>
                    <div class="layui-input-inline">
                        <select name="field_type[]" check="required" info="字段类型">
                            <option></option>
                            <option value="input">文本框</option>
                            <option value="textarea">多行</option>
                            <option value="input-date">日期</option>
                            <option value="radio">单选</option>
                            <option value="checkbox">多选</option>
                            <option value="select">列表</option>
                            <option value="image-upload">单图</option>
                            <option value="image-upload-multiple">多图</option>
                            <option value="video-upload">视频</option>
                        </select>
                    </div>
                    <div class="layui-input-inline w30">
                        <a class="layui-btn sort_up"> <i class="fa fa-arrow-up"></i>
                        </a>
                        <a class="layui-btn sort_down"> <i class="fa fa-arrow-down"></i>
                        </a>
                        <a class="layui-btn layui-btn-danger del_field">删除</a>
                    </div>
                    <div class="layui-input-inline" style="width:100%;margin-top:15px">
                        <textarea class="layui-textarea" name="field_param[]" placeholder="参数方式例如:
1=>
                            白色
2=>红色
3=>黑色">
                        </textarea>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    字段
                    <span class="field_idx"></span>
                </label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <input type="text" name="field_name[]" placeholder="字段名称" class="layui-input" check="required" info="字段名称"/>
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="field_code[]" placeholder="字段编码" class="layui-input" check="required" info="字段编码"/>
                    </div>
                    <div class="layui-input-inline">
                        <select name="field_type[]" check="required" info="字段类型">
                            <option></option>
                            <option value="input">文本框</option>
                            <option value="textarea">多行</option>
                            <option value="input-date">日期</option>
                            <option value="radio">单选</option>
                            <option value="checkbox">多选</option>
                            <option value="select">列表</option>
                            <option value="image-upload">单图</option>
                            <option value="image-upload-multiple">多图</option>
                            <option value="video-upload">视频</option>
                        </select>
                    </div>
                    <div class="layui-input-inline w30">
                        <a class="layui-btn sort_up">
                            <i class="fa fa-arrow-up"></i>
                        </a>
                        <a class="layui-btn sort_down">
                            <i class="fa fa-arrow-down"></i>
                        </a>
                        <a class="layui-btn layui-btn-danger del_field">删除</a>
                    </div>
                    <div class="layui-input-inline" style="width:100%;margin-top:15px">
                        <textarea class="layui-textarea" name="field_param[]" placeholder="参数方式例如:1=>白色"></textarea>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">
                    字段
                    <span class="field_idx"></span>
                </label>
                <div class="layui-input-block">
                    <div class="layui-input-inline">
                        <input type="text" name="field_name[]" placeholder="字段名称" class="layui-input" check="required" info="字段名称" />
                    </div>
                    <div class="layui-input-inline">
                        <input type="text" name="field_code[]" placeholder="字段编码" class="layui-input" check="required" info="字段编码" />
                    </div>
                    <div class="layui-input-inline">
                        <select name="field_type[]" check="required" info="字段类型">
                            <option></option>
                            <option value="input">文本框</option>
                            <option value="textarea">多行</option>
                            <option value="input-date">日期</option>
                            <option value="radio">单选</option>
                            <option value="checkbox">多选</option>
                            <option value="select">列表</option>
                            <option value="image-upload">单图</option>
                            <option value="image-upload-multiple">多图</option>
                            <option value="video-upload">视频</option>
                        </select>
                    </div>
                    <div class="layui-input-inline w30">
                        <a class="layui-btn sort_up">
                            <i class="fa fa-arrow-up"></i>
                        </a>
                        <a class="layui-btn sort_down">
                            <i class="fa fa-arrow-down"></i>
                        </a>
                        <a class="layui-btn layui-btn-danger del_field">删除</a>
                    </div>
                    <div class="layui-input-inline" style="width:100%;margin-top:15px">
                        <textarea class="layui-textarea" name="field_param[]" placeholder="参数方式例如:1=>白色"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <a class="layui-btn" onclick="add_field();">添加</a>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <a class="layui-btn" onclick="save();">保存</a>
                <a class="layui-btn layui-btn-primary" onclick="go_return_url();">取消</a>
            </div>
        </div>
    </form>
</div>
<div id="tpl_field" style="display:none;">
    <div class="layui-form-item">
        <label class="layui-form-label">
            字段
            <span class="field_idx"></span>
        </label>
        <div class="layui-input-block">
            <div class="layui-input-inline">
                <input type="text" name="field_name[]" placeholder="字段名称" class="layui-input" check="required" info="字段名称"/>
            </div>
            <div class="layui-input-inline">
                <input type="text" name="field_code[]" placeholder="字段编码" class="layui-input" check="required" info="字段编码"/>
            </div>
            <div class="layui-input-inline">
                <select name="field_type[]" check="required" info="字段类型">
                    <option></option>
                    <option value="input">文本框</option>
                    <option value="textarea">多行</option>
                    <option value="input-date">日期</option>
                    <option value="radio">单选</option>
                    <option value="checkbox">多选</option>
                    <option value="select">列表</option>
                    <option value="image-upload">单图</option>
                    <option value="image-upload-multiple">多图</option>
                    <option value="video-upload">视频</option>
                </select>
            </div>
            <div class="layui-input-inline w30">
                <a class="layui-btn sort_up">
                    <i class="fa fa-arrow-up"></i>
                </a>
                <a class="layui-btn sort_down">
                    <i class="fa fa-arrow-down"></i>
                </a>
                <a class="layui-btn layui-btn-danger del_field">删除</a>
            </div>
            <div class="layui-input-inline" style="width:100%;margin-top:15px">
                <textarea class="layui-textarea" name="field_param[]" placeholder="参数方式例如:1=>白色"></textarea>
            </div>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    layui.use(['form', 'element'], function () {
        let $ = layui.jquery;
        let form = layui.form;
        let fn = {
            add_field: function () {
                $("#field_box").append($('#tpl_field').html());
                fn.init_field_idx();
                form.render();
            },
            init_field_idx: function () {
                $('#field_box .field_idx').each(function (idx) {
                    $(this).text(idx + 1);
                })
            },
            save: function () {
                send_form("form_data", "{:url('system_group/save')}", function (res) {
                    if (res.code) {
                        layer.msg(res.msg, {
                            time: 1200
                        }, function () {
                            location.href = "{:url('index')}";
                        });
                    } else {
                        layer.msg(res.msg);
                        return false;
                    }
                });
            }
        };

        fn.init_field_idx();

        $(document).on('click', '.del_field', function () {
            $(this).closest('.layui-form-item').remove();
            fn.init_field_idx();
        });

        $(document).on('click', '.sort_up', function () {
            let $box = $(this).closest('.layui-form-item');
            $box.prev().insertAfter($box);
            fn.init_field_idx();
        });

        $(document).on('click', '.sort_down', function () {
            let $box = $(this).closest('.layui-form-item');
            $box.next().insertBefore($box);
            fn.init_field_idx();
        });

        win_exp(fn);

    });
</script>
{/block}